<template>
    <div class="describe-wrapper" @click="handleOnClick">
        <div class="describe-box">
            <p class="describe-number">
                {{ describeItem.count }}
            </p>
            <p class="describe-main">
                {{ describeItem.describe }}
            </p>
        </div>
    </div>
</template>

<script lang="ts">
    import { toRefs } from 'vue'
    export default {
        name: 'DescribeWithIcon',
        props: {
            describeItem: {
                type: Object,
                default: () => ({})
            }
        },
        emits: ['click'],
        setup(props, { emit }) {
            const { describeItem } = toRefs(props)
            function handleOnClick() {
                emit('click', describeItem.value)
            }
            return {
                handleOnClick
            }
        }
    }
</script>
<style lang="less" scoped>
    .describe-wrapper {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        align-items: center;

        .describe-box {
            padding-left: 63%;
            text-align: center;
            color: #fff;

            .describe-number {
                margin: 0;
                font-size: 54px;
                line-height: 1.2;
                font-weight: bold;
            }

            .describe-main {
                margin: 0;
                color: #fff;
            }
        }
    }
</style>
